<template>
  <div style="padding: 0px 0px 0px 0px;height: 100%;">
    <!-- :stretch="true"  选项卡平铺 -->
    <el-tabs v-model="visitDoctorActive" class="parent-tab" style="height: 100%; padding: 0 5px 0 5px"
             @tab-remove="removeTab">
      <el-tab-pane label="患者床位列表" name="0" style="height: 100%;overflow-y: auto;">
        <template #label><span
          style="color: #4E64F6;font-weight: bold;font-size: 19px;margin-left: 10px">患者床位列表</span></template>
        <patient-card-list @card-dbl-click="cardDblClick"/>
      </el-tab-pane>
      <el-tab-pane v-for="item in patientTabs" :key="item.name" :label="item.title" :name="item.name" closable
                   style="height: 100%;overflow-y: auto;">
        <template #label>
          <span @contextmenu.prevent="handleRightClick(item.name)">{{ item.title.split('|').join(' | ') }}</span>
        </template>
        <patient-info-index :patient-id="patientInfo.patientId" :patient-info-this="patientInfo" :visit-id="patientInfo.visitId"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import patientCardList from './patientCardList.vue';
import patientInfoIndex from './patientInfo/index.vue'

const {proxy} = getCurrentInstance() as any;
const visitDoctorActive = ref('0')
const patientTabs = ref<any>([])
const patientInfo = ref<any>({})
const removeTab = (targetName: string) => {
  const tabs = patientTabs.value
  let activeName = visitDoctorActive.value
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }
  visitDoctorActive.value = activeName
  patientTabs.value = tabs.filter((tab) => tab.name !== targetName)
  if (patientTabs.value.length == 0) {
    visitDoctorActive.value = "0"
  }
}

function cardDblClick(obj: any, index: number) {
  const newTabName = obj.hospitalNo + "|" + obj.name + "|" + obj.bedNo + "床"
  const tabIndex = patientTabs.value.findIndex((item: any) => {
    return obj.bedNo == item.name
  })
  if (tabIndex > -1) {
    visitDoctorActive.value = obj.bedNo + ""
  } else {
    patientTabs.value.push({
      title: newTabName,
      name: obj.bedNo + ""
    })
    visitDoctorActive.value = obj.bedNo + ""
  }
  patientInfo.value = obj
}

// 处理鼠标右键点击事件
const handleRightClick = (tabName) => {
  console.log(`你右键点击了页签: ${tabName}`);
  // 在这里可以添加更多的逻辑，比如显示自定义菜单等
};
</script>

<script lang="ts">
export default {
  name: "VisitDoctor"
}
</script>

<style scoped>
:deep(.el-tabs) {
  overflow-y: auto;
}

:deep(.el-tabs__content) {
  height: calc(100% - 60px);
  overflow-y: auto;
}

:deep(.el-tabs__item.is-active, .el-tabs__item:hover) {
  color: #ffffff;
  background-color: #68baed;
  border-radius: 8px 8px 0 0;
}

:deep(.el-tabs__item:last-child) {
  padding-right: 10px !important;
}

:deep(.el-tabs__item) {
  color: #558eff;
  margin-right: 10px;
}

/* :deep(.app-container) {
   background-color: #ffffff;
}
*/

/* :deep(.parent-tab .el-tabs__item) {
    min-width: 160px;
    height: 30px;
    margin-right: -24px;
} */

/* :deep(.el-tabs__content) {
    height: calc(100% - 30px);
} */

/* :deep(.parent-tab .el-tabs__nav-scroll) {
    background-color: #ffffff;
}

:deep(.parent-tab .el-tabs__header) {
    margin: 0 0 0px;
    box-shadow: 0 0 18px 0 #878787;
} */
</style>
